<template>
	<view class="deviceStock">
		<!-- 材料库存管理 -->
		<navBar title="材料库存管理" goBackUrl="/pages/homePage/platform" @goBack="goBack"></navBar>

		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>

		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav2" @click="getstation">
					<view class="name">
						<image class="image" src="/static/image/jidi.png" mode=""></image>
						<view class="fonzt active" v-if="params.stationName ===''">点击选择基地</view>
						<view class="fonzt" v-else>{{ params.stationName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>

				<view class="nav2">
					<view class="name" @click="isShowPopupSelect = true">
						<image class="image" src="/subpackage-equipment/static/shebei22.png" mode=""></image>
						<view class="fonzt active" v-if="deviceTypeName === ''">点击选择材料类型和名称</view>
						<view class="fonzt" v-else>{{ deviceTypeName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>


				<view class="info uniCollapse">
					<uni-collapse>
						<uni-collapse-item v-for="(item,index) in tableData" title-border="show" :key="index"
							:name="item.id" :title="item.name" :value="item.num">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.list.length }}
									</view>
								</view>
							</template>
							<view class="center" v-for="(i,j) in item.list" :key="j">
								<view class="item">
									<view class="name">规格型号：</view>
									<view class="value">{{i.specificationModel}}</view>
								</view>
								<view class="item">
									<view class="name">过保日期：</view>
									<view class="value">{{i.time}}</view>
								</view>
								<view class="item">
									<view class="name">库存量：</view>
									<view class="value">{{i.num}}{{i.unit}}</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</scroll-view>

		<!-- <view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="移库" @click="getMoveStock"></u-button>
		</view> -->
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="getMoveStock" :loading="loading" class="button-primary">移库</button>
			</view>
		</view>
		<u-picker @cancel="isShowStation = false" :immediateChange="true" @confirm="stationSelect" keyName="name"
			:show="isShowStation" :columns="stationList"></u-picker>
		<BaseSelect :titleObj="titleObj" :isShow="isShowPopupSelect" :deviceTypeList="deviceTypeList"
			@cancel="popupSelectCancel" @confrim="popupSelectConfrim">
		</BaseSelect>
	</view>
</template>

<script>
	import {
		materialGetMaterialInventoryList
	} from "@/api/materials/materials.js"
	import {
		getStationList
	} from "@/api/baseManage/baseManage.js"
	import {
		getDeviceType,
		getMaterialList
	} from "@/api/emergency/emergencyDispatch.js"
	import mixins from "@/utils/mixins.js"
	import baseInput from "@/components/baseInput/baseInput.vue"
	import BaseSelect from "@/components/baseSelect/baseSelect.vue"
	import uniCollapse from "../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		components: {
			baseInput,
			BaseSelect,
			uniCollapse
		},
		mixins: [mixins],
		data() {
			return {
				titleObj: {
					deviceType: "材料类型",
					deviceName: "材料名称",
					title: "材料类别及材料名称筛选"
				},
				loading: false, // 基地名称
				deviceTypeName: "", // 设备类型和名称
				tableData: [],
				isShowStation: false,
				isShowPopupSelect: false,
				deviceTypeList: [],
				stationList: [],
				params: {
					stationName: "",
					stationId: "",
					deviceTypeIds: "",
					subDeviceTypeId: "",
					keyWord: "",
				}
			}
		},
		mounted() {
			console.log('mouted')
			this.init()
		},
		methods: {
			async init() {
				console.log('1212')
				let base = await getStationList({
					typeIds: [102, 104],
					name: ""
				})
				this.stationList = [base.result]
				let _data = {
					name: "",
					ex1: 'material',
				}
				// 材料类型 树结构
				let res = await getDeviceType(_data)
				this.getMaterialTypeList(res.result);
				this.getList()
			},
			getList() {
				this.tableData = []
				materialGetMaterialInventoryList(this.params).then(res => {
					if (res.success) {
						let list = res.result
						//获取所有的类型
						let typeList = Array.from(new Set(list.map(item => item.deviceTypeName + "/" + item
							.subDeviceTypeName)))
						typeList.forEach(item => {
							let itemObj = {
								name: item,
								list: [],
							}
							let subDeviceTypeName = item.split("/")[1]
							list.forEach(i => {
								if (subDeviceTypeName === i.subDeviceTypeName) {
									if (i.expirationDate) {
										i.time = this.getDate2(i.expirationDate)
									}
									itemObj.list.push(i)
								}
							})
							this.tableData.push(itemObj)
						})
						console.log(this.tableData)
					}
				})
			},
			//基站点击事件
			getstation() {
				this.isShowStation = true
			},
			stationSelect(data) {
				this.isShowStation = false
				this.params.stationName = data.value[0].name
				this.params.stationId = data.value[0].id
				this.getList()
			},
			// input的input事件
			inputChange(e) {
				console.log(e)
				clearTimeout(this.time)
				if (!e) {
					this.clearInput()
					return
				}
				// this.time = setTimeout(()=>{
				this.params.keyWord = e
				this.getList()
				// }, 500)
			},
			clearInput() {
				this.params.keyWord = ""
				this.getList()
			},
			getMaterialTypeList(val) {
				let list = val.map(item => ({
					...item,
					isChecked: false,
					id: item.id + ""
				}))
				let arr2 = list.filter(item => item.treeLevel === 2).map(val => ({
					...val,
					childrenList: []
				}))
				let arr3 = list.filter(item => item.treeLevel === 3)

				arr2.forEach(item => {
					arr3.forEach(value => {
						if (item.id === value.parentId + "") {
							item.childrenList.push({
								...value,
								tempCode: item.id + '-' + value.id
							})
						}
					})
				})
				this.deviceTypeList = arr2
			},
			popupSelectConfrim(deviceList, selectDeviceTypeList, selectDeviceNameList) {
				// console.log(deviceList, selectDeviceTypeList,selectDeviceNameList)
				this.isShowPopupSelect = false
				let str = []
				this.deviceTypeList.forEach(item => {
					selectDeviceTypeList.forEach(value => {
						if (item.id === value) {
							str.push(item.name)
						}
					})
				})
				this.deviceTypeName = str.join(",")
				this.params.deviceTypeIds = selectDeviceNameList
				this.getList()

			},
			// 取消 设备筛选
			popupSelectCancel(bool) {
				// this.obj.deviceTypeIds = []
				this.deviceTypeName = ""
				this.isShowPopupSelect = false
				this.getList()
			},
			// 移库操作
			getMoveStock() {
				uni.navigateTo({
					url: "/subpackage-materials/pages/materials/materialsInventory/inventoryMovement"
				})
			},
			// 返回上一级
			goBack(url) {
				uni.switchTab({
					url: url
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.deviceStock {
		padding-bottom: 80rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		background-color: #F5F7FA;
		/* #ifdef MP-WEIXIN */
		padding-top: 180rpx;

		/* #endif */
		.search {
			padding: 30rpx;
			padding-bottom: 24rpx;
			background-color: #FFFFFF;
		}

		.scroll-box {
			max-height: calc(100vh - 386rpx);
			padding-top: 10rpx;
		}

		.content {
			padding: 24rpx 32rpx;
			height: calc(100vh - 435rpx);
		}

		.nav2 {
			background-color: #FFFFFF;
			height: 106rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 26rpx;
			line-height: 106rpx;
			display: flex;
			align-items: center;

			.name {
				flex: 1;
				display: flex;
				align-items: center;

				.fonzt {
					flex: 1;
					width: 248rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.active {
					color: #C0C0C0;
				}

				.image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}
			}
		}

		.info {
			margin-top: 40rpx;

			.center {
				background-color: #FFFFFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;

				.item {
					display: flex;
					margin-top: 20rpx;

					.name {
						width: 150rpx;
					}
				}
			}
		}
	}
</style>